<template>
    <div class="app-container calendar-list-container">
        <basic-container>
            <el-form
                :model="queryForm"
                ref="queryFormRef"
                :inline="true"
                size="small"
            >
                <el-form-item>
                    <el-input placeholder="请输入业主名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input placeholder="请输入业主身份证号"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input placeholder="请输入联系方式"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-select placeholder="请选择楼栋" v-model="queryForm.aa">
                        <el-option label="-请选择-" value="1" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-select placeholder="请选择单元" v-model="queryForm.bb">
                        <el-option label="-请选择-" value="1" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-select placeholder="请选择房屋" v-model="queryForm.cc">
                        <el-option label="-请选择-" value="1" />
                    </el-select>
                </el-form-item>

                <el-form-item>
                    <el-input placeholder="请输入业主ID"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button
                        type="primary"
                        icon="el-icon-search"
                        @click="handleSearch"
                        >查询</el-button
                    >
                    <el-button icon="el-icon-delete" @click="handleClear"
                        >重置</el-button
                    >
                </el-form-item>
            </el-form>
            <el-button type="primary" icon="el-icon-plus" @click="addOwner"
                >添加业主</el-button
            >
            <el-table :data="tableList" border stripe highlight-current-row>
                <el-table-column
                    type="index"
                    label="序号"
                    align="center"
                ></el-table-column>
                <el-table-column
                    label="业主ID"
                    prop="a"
                    align="center"
                ></el-table-column>
                <el-table-column
                    label="名称"
                    prop="b"
                    align="center"
                ></el-table-column>
                <el-table-column
                    label="性别"
                    prop="c"
                    align="center"
                ></el-table-column>
                <el-table-column
                    label="年龄"
                    prop="d"
                    align="center"
                ></el-table-column>
                <el-table-column
                    label="身份证"
                    prop="e"
                    align="center"
                ></el-table-column>
                <el-table-column
                    label="联系方式"
                    prop="f"
                    align="center"
                ></el-table-column>
                <el-table-column
                    label="创建员工"
                    prop="g"
                    align="center"
                ></el-table-column>
                <el-table-column
                    label="微信"
                    prop="h"
                    align="center"
                ></el-table-column>
                <el-table-column
                    label="QQ"
                    prop="i"
                    align="center"
                ></el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-popover
                            style="margin-right: 10px"
                            placement="bottom"
                            width="200"
                            trigger="click"
                            :ref="`popover-${scope.$index}`"
                        >
                            <div>
                                <div class="handle-item">
                                    <span @click="updateOwner(scope.row.id)"
                                        >修改业主</span
                                    >|<span @click="deleteOwner(scope.row.id)"
                                        >删除业主</span
                                    >
                                </div>
                                <div class="handle-item">
                                    <span @click="moveInHouse(scope.row.id)"
                                        >入住房屋</span
                                    >|<span
                                        @click="
                                            showCard(scope.row.id, 'unBingding')
                                        "
                                        >房屋解绑</span
                                    >
                                </div>
                                <div class="handle-item">
                                    <span @click="openPropertyFee(scope.row.id)"
                                        >物业费用</span
                                    >|<span>停车费用</span>
                                </div>
                            </div>
                            <el-button slot="reference" type="text"
                                >变更</el-button
                            >
                        </el-popover>
                        <el-button
                            type="text"
                            @click="showCard(scope.row.id, 'detail')"
                            >详情</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
            <!-- 添加或修改业主 -->
            <el-dialog
                title="添加业主"
                :visible.sync="saveOwnerDialogVisible"
                width="40%"
            >
                <save-owner />
            </el-dialog>
        </basic-container>
    </div>
</template>

<script>
import SaveOwner from "../components/saveOwner";
export default {
    name: "ownerInfo",
    components: {
        SaveOwner,
    },
    data() {
        return {
            saveOwnerDialogVisible: false,

            queryForm: {},
            tableList: [
                {
                    id: 1,
                    a: "a",
                    b: "b",
                    c: "c",
                    d: "d",
                    e: "e",
                    f: "f",
                    g: "g",
                    h: "h",
                    i: "i",
                },
            ],
            cardType: "",
        };
    },
    methods: {
        // 查询
        handleSearch() {},
        // 清空查询条件
        handleClear() {},
        // 添加业主
        addOwner() {
            this.saveOwnerDialogVisible = true;
        },
        // 修改业主
        updateOwner(id) {
            this.saveOwnerDialogVisible = true;
        },
        // 删除业主
        deleteOwner(id) {
            this.$confirm("是否删除该业主信息?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.$message.success("删除成功");
                })
                .catch(() => {});
        },
        moveInHouse() {
            this.$router.push({
                path: "/owner/ownerInfo/moveInHouse/index",
                query: {},
            });
        },
        // 房屋解绑或详情
        showCard(id, cardType) {
            this.$router.push({
                path: "/owner/ownerInfo/ownerDetail/index",
                query: {
                    id,
                    cardType,
                },
            });
        },
        openPropertyFee() {

        },
    },
};
</script>

<style lang="scss" scoped>
.el-form-item {
    margin-right: 50px;
}
.el-table {
    margin-top: 10px;
}
.handle-item {
    display: flex;
    justify-content: space-around;
    cursor: pointer;
    line-height: 25px;
}
</style>